[[ define "down/index.html" ]]
<!-- 如果多级目录中的文件名相同时，需要在html文件中声明一下别名，供后端发送html()时使用，避免加载模板文件被替换掉-->

[[template "head" .]] <!-- 调用定义的公共头部模板文件 -->



<!-- 页面标题区域 -->
<section class="py-12 bg-gradient-to-r from-primary/10 to-secondary/10">
    <div class="container mx-auto px-4">
        <div class="text-center max-w-3xl mx-auto">
            <h1 class="text-4xl md:text-5xl font-bold text-base-content mb-6">下载中心</h1>
            <p class="text-xl text-base-content/70">获取最新产品资源和技术文档</p>
        </div>
    </div>
</section>

<!-- 下载列表区域 -->
<section class="py-16 bg-base-100">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            <!-- 下载列表 -->
            <div class="space-y-6">
                <!-- 下载项目1 -->
                <div class="bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                    <div class="p-6 md:p-8">
                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                            <div class="flex-1">
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-3">
                                        <i class="fa fa-users text-primary"></i>
                                    </div>
                                    <h3 class="text-xl font-bold text-base-content">产品技术白皮书</h3>
                                </div>
                                <p class="text-base-content/70 mb-2">详细的产品技术架构、功能特点和使用指南文档</p>
                                <div class="flex items-center text-sm text-base-content/60">
                                    <i class="fa fa-file mr-1"></i>
                                    <span class="mr-4">PDF文档</span>
                                    <i class="fa fa-file-archive mr-1"></i>
                                    <span class="mr-4">5.2 MB</span>
                                    <i class="fa fa-calendar mr-1"></i>
                                    <span>更新日期：2025-01-15</span>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <a href="/down/1.rar" class="btn btn-primary px-8 py-3" download>
                                    <i class="fa fa-download mr-2"></i>立即下载
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 下载项目2 -->
                <div class="bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                    <div class="p-6 md:p-8">
                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                            <div class="flex-1">
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center mr-3">
                                        <i class="fa fa-code text-secondary"></i>
                                    </div>
                                    <h3 class="text-xl font-bold text-base-content">开发工具包 SDK</h3>
                                </div>
                                <p class="text-base-content/70 mb-2">包含完整的API文档、示例代码和开发工具，支持多种编程语言</p>
                                <div class="flex items-center text-sm text-base-content/60">
                                    <i class="fa fa-file-archive mr-1"></i>
                                    <span class="mr-4">ZIP压缩包</span>
                                    <i class="fa fa-file-archive mr-1"></i>
                                    <span class="mr-4">32.7 MB</span>
                                    <i class="fa fa-calendar mr-1"></i>
                                    <span>更新日期：2025-01-10</span>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <a href="/down/1.rar" class="btn btn-secondary px-8 py-3" download>
                                    <i class="fa fa-download mr-2"></i>立即下载
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 下载项目3 -->
                <div class="bg-base-100 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
                    <div class="p-6 md:p-8">
                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                            <div class="flex-1">
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center mr-3">
                                        <i class="fa fa-users text-accent"></i>
                                    </div>
                                    <h3 class="text-xl font-bold text-base-content">产品演示视频</h3>
                                </div>
                                <p class="text-base-content/70 mb-2">产品功能演示和操作指导视频，快速了解产品核心功能和操作流程</p>
                                <div class="flex items-center text-sm text-base-content/60">
                                    <i class="fa fa-file-video mr-1"></i>
                                    <span class="mr-4">MP4视频</span>
                                    <i class="fa fa-file-archive mr-1"></i>
                                    <span class="mr-4">156.3 MB</span>
                                    <i class="fa fa-calendar mr-1"></i>
                                    <span>更新日期：2024-12-28</span>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <a href="/down/1.rar" class="btn btn-accent px-8 py-3" download>
                                    <i class="fa fa-download mr-2"></i>立即下载
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <!-- 下载说明 -->
            <div class="mt-12">
                <div class="bg-base-100 border border-base-300 rounded-2xl p-6">
                    <h3 class="text-xl font-bold text-base-content mb-4">
                        <i class="fa fa-info-circle text-primary mr-2"></i>下载说明
                    </h3>
                    <ul class="text-base-content/70 space-y-2">
                        <li>• 所有资源均为免费下载，无需注册账号</li>
                        <li>• 部分文件较大，建议使用稳定的网络环境下载</li>
                        <li>• 下载过程中如有问题，请联系技术支持</li>
                        <li>• 资源会定期更新，请关注最新版本</li>
                    </ul>
                </div>
            </div>


        </div>
    </div>
</section>

<style>
/* 下载卡片悬停效果 */
.bg-base-100.rounded-2xl {
    transition: all 0.3s ease;
}

.bg-base-100.rounded-2xl:hover {
    transform: translateY(-4px);
}

/* 下载按钮动画 */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 下载按钮点击效果
    const downloadButtons = document.querySelectorAll('a[download]');
    downloadButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            // 这里可以添加下载统计或分析代码
            console.log('下载文件:', this.getAttribute('href'));
            
            // 显示下载提示（可选）
            const fileName = this.closest('.bg-base-100').querySelector('h3').textContent;
            alert('开始下载：' + fileName);
        });
    });
    
    // 卡片悬停效果
    const downloadCards = document.querySelectorAll('.bg-base-100.rounded-2xl');
    downloadCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-4px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
});
</script>


[[template "foot" .]] <!-- 调用定义的公共底部模板文件 -->

[[end]]